<template>
    <div class="mall">
        <div class="mall-top">
            <div class="w1200">
                <ul class="clear">
                    <li>
                        <img src="../images/top-img.png" alt="">
                        <span>小飞飞</span>
                    </li>
                    <li>
                        <router-link to="/msg">
                        <img src="../images/mall-top1.png" alt="">
                        <span>消息</span>
                        </router-link>
                    </li>
                    <li>
                         <router-link to="/mallOrder/demo">
                        <img src="../images/mall-top2.png" alt="">
                        <span>批发订单</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/favoriteproduct">
                        <img src="../images/mall-top3.png" alt="">
                        <span>我的收藏</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/mallOpinion/proposal">
                        <img src="../images/mall-top4.png" alt="">
                        <span>意见反馈</span>
                        </router-link>
                    </li>
                    <li>
                        <img src="../images/mall-top5.png" alt="">
                        <span>客服</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="mall-tops">
            <div class="w1200 clear">
                <div class="fl mall-tops-l w300">
                    <img src="../images/logo-01.png" alt="">
                </div>
                <div class="fl mall-tops-m clear">
                    <div class="fl mall-tops-m-l">
                        <el-select v-model="value" placeholder="药品">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="fl mall-tops-m-r">
                        <img src="../images/searchs.png" alt="">
                        <el-input v-model="search" v-if="value=='药品'" placeholder="请输入药品名称"></el-input>
                        <el-input v-model="search" placeholder="请输入医药公司名称" v-else></el-input>
                    </div>
                </div>
                <router-link to="/cart" class="fl  mall-tops-r">
                    <i class="iconfont icon-cart"></i>
                    <span>我的购物车</span>
                    <i class="iconfont icon-jiantou"></i>
                    <i class="roundMsgTip">1</i>
                </router-link>
            </div>
        </div>
        <div class="mall-mains">
            <div class="w1200 clear">
                <div>
                    <el-carousel trigger="click" height="350px">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <img src="../images/mall1.jpg" class="w1200-img" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="mall-mains-l w300">
                    <div class="mall-mains-l-top">
                        全部分类
                    </div>
                    <div class="mall-mains-l-b">
                        <ul>
                            <li>
                                <span class="mall-mains-l-title">药品</span>
                                <span>药品</span>
                                <span>化学药品</span>
                                <div class="mall-mains-r mall-mains-r1">
                                    1
                                </div>
                            </li>
                            <li>
                                <span class="mall-mains-l-title">中药材及饮片</span>
                                <span>中药</span>
                                <span>饮片</span>
                                <span>其他中药</span>
                                <div class="mall-mains-r mall-mains-r2">
                                    2
                                </div>
                            </li>
                            <li>
                                <span class="mall-mains-l-title">医疗器械</span>
                                <span>医疗器械</span>
                                <div class="mall-mains-r mall-mains-r3">
                                    3
                                </div>
                            </li>
                            <li>
                                <span class="mall-mains-l-title">计生用品</span>
                                <span>避孕套</span>
                                <span>其他用品</span>
                                <div class="mall-mains-r mall-mains-r4">
                                    4
                                </div>
                            </li>
                            <li>
                                <span class="mall-mains-l-title">进口药品</span>
                                <span>其他药品</span>
                                <div class="mall-mains-r mall-mains-r5">
                                    5
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="mall-mains-recommend">
            <div class="w1200 clear">
                <div class="mall-mains-recommend-l fl">
                    <div class="mall-mains-recommend-l-txt">
                        <div>
                            <span>推荐药品</span>
                            <img src="../images/mall-right.png" alt="">
                        </div>
                        <div>家中常备</div>
                    </div>
                </div>
                <div class="mall-mains-recommend-r fl">
                    <el-carousel trigger="click" class="mall-mains-recommend-rs" height="360px">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <div class="w25 fl" v-for="item in 4" :key="item">
                                <div class="w25-w">
                                    <img src="../images/bak03.jpg" alt="">
                                    <div class="mall-mains-recommend-t">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t mall-mains-recommend-ts">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t-m">
                                        ￥79.90
                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="mall-mains-special">
            <div class="w1200">
                <div class="mall-mains-special-top">
                    <span class="color">儿童专场</span>
                    <span>吃饱饱 长高高</span>
                </div>
                <div class="mall-mains-special-bottom clear">
                    <div class="mall-mains-special-bottom-l mall-mains-special1  fl">
                        <div class="mall-mains-special-bottom-l-txt">
                            <div>
                                <span>儿童专场</span>
                                <img src="../images/mall-right.png" alt="">
                            </div>
                            <div>呵护儿童健康成长</div>
                        </div>
                    </div>
                    <div class="mall-mains-special-bottom-r mall-mains-recommend-rs fl">
                        <div class="clear">
                            <div class="w25 fl" v-for="item in 4" :key="item">
                                <div class="w25-w">
                                    <img src="../images/bak03.jpg" alt="">
                                    <div class="mall-mains-recommend-t">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t mall-mains-recommend-ts">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t-m">
                                        ￥79.90
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clear">
                            <div class="w25 fl" v-for="item in 4" :key="item">
                                <div class="w25-w">
                                    <img src="../images/bak03.jpg" alt="">
                                    <div class="mall-mains-recommend-t">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t mall-mains-recommend-ts">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t-m">
                                        ￥79.90
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mall-mains-special mall-mains-brand">
            <div class="w1200">
                <div class="mall-mains-special-top">
                    <span class="color">推荐品牌</span>
                    <span>大品牌 放心购</span>
                    <div class="mall-mains-specials-more fr">
                        更多
                        <img src="../images/specials-more.png" alt="">
                    </div>
                </div>
                <div class="mall-mains-brand-bottom">
                    <div class="clear mall-mains-brand-bottoms" v-for="item in 2" :key="item">
                        <div class="w20" v-for="item in 5" :key="item">
                            <div class="mall-mains-brand-img">
                                <img src="../images/bak03.jpg" alt="">
                            </div>
                            <div class="mall-mains-brand-txt">九芝堂</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mall-mains-special">
            <div class="w1200">
                <div class="mall-mains-special-top">
                    <span class="color">老人专场</span>
                    <span>多锻炼 常长寿</span>
                </div>
                <div class="mall-mains-special-bottom clear">
                    <div class="mall-mains-special-bottom-l mall-mains-special2  fl">
                        <div class="mall-mains-special-bottom-l-txt">
                            <div>
                                <span>老人专场</span>
                                <img src="../images/mall-right.png" alt="">
                            </div>
                            <div>孝敬父母孝敬父母</div>
                        </div>
                    </div>
                    <div class="mall-mains-special-bottom-r mall-mains-recommend-rs fl">
                        <div class="clear">
                            <div class="w25 fl" v-for="item in 4" :key="item">
                                <div class="w25-w">
                                    <img src="../images/bak03.jpg" alt="">
                                    <div class="mall-mains-recommend-t">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t mall-mains-recommend-ts">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t-m">
                                        ￥79.90
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clear">
                            <div class="w25 fl" v-for="item in 4" :key="item">
                                <div class="w25-w">
                                    <img src="../images/bak03.jpg" alt="">
                                    <div class="mall-mains-recommend-t">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t mall-mains-recommend-ts">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t-m">
                                        ￥79.90
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mall-mains-special mall-mains-specials">
            <div class="w1200">
                <div class="mall-mains-special-top">
                    <span class="color">推荐医药公司</span>
                    <span>很靠谱 超专业</span>
                    <div class="mall-mains-specials-more fr">
                        更多
                        <img src="../images/specials-more.png" alt="">
                    </div>
                </div>
                <div class="mall-mains-specials-botton">
                    <div class="w25" v-for="item in 4" :key="item">
                        <div class="mall-mains-specials-botton-t">
                            <div>
                                <div>桂林医药集团</div>
                                <el-rate v-model="values" disabled text-color="#ff9900">
                                </el-rate>
                            </div>
                        </div>
                        <div class="mall-mains-specials-botton-b clear">
                            <div class="fl mall-mains-specials-botton-b-l">
                                <img src="../images/bak03.jpg" alt="">
                            </div>
                            <div class="fl mall-mains-specials-botton-b-r">
                                <div>
                                    <img src="../images/bak03.jpg" alt="">
                                </div>
                                <div>
                                    <img src="../images/bak03.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mall-mains-special">
            <div class="w1200">
                <div class="mall-mains-special-top">
                    <span class="color">孕妇专场</span>
                    <span>美美哒 生宝宝</span>
                </div>
                <div class="mall-mains-special-bottom clear">
                    <div class="mall-mains-special-bottom-l mall-mains-special3  fl">
                        <div class="mall-mains-special-bottom-l-txt">
                            <div>
                                <span>孕妇专场</span>
                                <img src="../images/mall-right.png" alt="">
                            </div>
                            <div>美丽孕妇美丽孕妇</div>
                        </div>
                    </div>
                    <div class="mall-mains-special-bottom-r mall-mains-recommend-rs fl">
                        <div class="clear">
                            <div class="w25 fl" v-for="item in 4" :key="item">
                                <div class="w25-w">
                                    <img src="../images/bak03.jpg" alt="">
                                    <div class="mall-mains-recommend-t">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t mall-mains-recommend-ts">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t-m">
                                        ￥79.90
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clear">
                            <div class="w25 fl" v-for="item in 4" :key="item">
                                <div class="w25-w">
                                    <img src="../images/bak03.jpg" alt="">
                                    <div class="mall-mains-recommend-t">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t mall-mains-recommend-ts">
                                        液冰硼滴眼冰硼滴眼冰液冰硼滴眼冰硼滴眼冰
                                    </div>
                                    <div class="mall-mains-recommend-t-m">
                                        ￥79.90
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mall-mains-bottoms">
            <div class="w1200">
                <div>京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号</div>
                <div>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155</div>
                <div>Copyright © 2004 - 2018  京东JD.com 版权所有|消费者维权热线：4006067733经营证照</div>
            </div>
        </div>
        <div class="bakContent">
            <router-link to="/mall">首页</router-link>
            <router-link to="/mallOrder/demo">订单</router-link>
            <router-link to="/mallOrderDetails/demo">订单详情</router-link>
            <router-link to="/mallOpinion/complaint">投诉</router-link>
            <router-link to="/mallOpinion/proposal">建议</router-link>
            <router-link to="/cart">进货单</router-link>
            <router-link to="/detail">商品详情页</router-link>
            <router-link to="/favoriteproduct">收藏产品</router-link>
            <router-link to="/favoritestore">收藏店铺</router-link>
            <router-link to="/mallSearch">搜索结果页</router-link>
            <router-link to="/msg">消息列表页</router-link>
            <router-link to="/mallStoreIndex">店铺首页</router-link>
            <router-link to="/mallStoreAllProduct">店铺所有商品</router-link>
             <router-link to="/mallStoreArchives">公司档案</router-link>
             <router-link to="/mallpay">支付页面</router-link>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      value: "药品",
      search: "",
      values: "5",
      options: [
        {
          value: "药品",
          label: "药品"
        },
        {
          value: "医药公司",
          label: "医药公司"
        }
      ]
    };
  },
  methods: {
    overShow() {
      console.log(1);
    },
    outHide() {}
  }
};
</script>
<style lang="less">
@import "css/main.less";
    .bakContent{
        position: fixed;
        right: 0;
        top: 200px;
        padding:0 10px;
        background-color: red;
        a{
        color: #fff;
        font-size: 14px;
        display: block;
        height: 30px;
        line-height: 30px;
        text-align: center;
        }
    }
</style>

